<template>
  <div class="push-container">
    <PageHeader title="通知机器人接入流程" backPath="/dawn/dashboard/user"/>
    <div class="push-card">
      <div class="push-steps">
        <div class="push-step">
          <div class="push-step-header">
            <span class="push-step-index">1</span>
            <span class="push-step-title">打卡网址</span>
          </div>
          <div class="push-step-content">
            打开微信搜索喵提醒公众号服务,关注后点击下方菜单栏点击个人中心，如果提示需要注册绑定的话需要先按照它的提示注册绑定
            <!-- 使用浏览器打开网址
            <a href="https://www.pushplus.plus/login.html" target="_blank" class="push-link">
              https://www.pushplus.plus/login.html
            </a> -->
          </div>
          <div class="push-step-image">
            <img src="@images/steps/01.png" alt="打卡网址示意图" style="cursor: pointer; width: 150px; height: auto;" @click="openPreview($event)"/>
            <img src="@images/steps/02.png" alt="打卡网址示意图" style="cursor: pointer; width: 150px; height: auto;" @click="openPreview($event)"/>
          </div>
        </div>
        <div class="push-divider"></div>
        <div class="push-step">
          <div class="push-step-header">
            <span class="push-step-index">2</span>
            <span class="push-step-title">新增提醒单</span>
          </div>
          <div class="push-step-content">
           点击提醒单，在页面右上角点击新增提醒单->填写提醒单名称->点击保存
          </div>
          <div class="push-step-image">
            <img src="@images/steps/03.png" alt="获取Token示意图" style="cursor: pointer; width: 120px; height: auto;" @click="openPreview($event)"/>
            <img src="@images/steps/04.png" alt="获取Token示意图" style="cursor: pointer; width: 120px; height: auto;" @click="openPreview($event)"/>
            <img src="@images/steps/05.png" alt="获取Token示意图" style="cursor: pointer; width: 120px; height: auto;" @click="openPreview($event)"/>
          </div>
        </div>
        <div class="push-divider"></div>
        <div class="push-step">
          <div class="push-step-header">
            <span class="push-step-index">3</span>
            <span class="push-step-title">填写Token</span>
          </div>
          <div class="push-step-content">
            将获最后获取的喵码填到写到下方输入框中
          </div>
          <div class="push-form">
            <input type="text" v-model="token" placeholder="填写token" class="push-input"/>
            <button class="push-btn" @click="saveToken" :disabled="isSaving">
              {{ isSaving ? '保存中...' : '保存' }}
            </button>
          </div>
        </div>
        <div class="push-divider"></div>
        <!-- <div class="push-step">
          <div class="push-step-header">
            <span class="push-step-index">4</span>
            <span class="push-step-title">扫描二维码好友</span>
          </div>
          <div class="push-step-content">
            <QrCodeComponent 
              :apiFunction="getQrCodeFunc"
              @qrCodeLoaded="handleQrCodeLoaded"
            />
          </div>
        </div> -->

        <div class="push-step">
          <div class="push-step-header">
            <span class="push-step-index">4</span>
            <span class="push-step-title">最后测试一下</span>
          </div>
          <div class="push-step-content">
            成功后微信会推送
            <br/>
            <div style="color:green" v-if="sendMessage">
              {{sendMessage}}
            </div>
           
          </div>
          <div class="push-step-content">
            <button class="push-btn" @click="TestMsg" >点击测试</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import {onMounted, ref} from 'vue'
import request from '@/utils/request';
import apiUrls from '@/config/apiUrls'; 
import PageHeader from '@/Pages/compontents/PageHeader.vue';
import { Form, Field, Button, showToast, showConfirmDialog, PullRefresh, Checkbox, Cell, showImagePreview } from 'vant';
import QrCodeComponent from '@/Pages/compontents/QrCodeComponent.vue';

const QrCode = ref();
const token = ref(''); // 用于存储token输入框的值
const isSaving = ref(false); // 保存按钮的加载状态

onMounted(()=>{
    getToken()
})

const openPreview = (event) => {
  const imgElement = event.target;
  const imgUrl = imgElement.src;
  
  showImagePreview({
    images: [imgUrl],
    startPosition: 0,
    closeable: true,
    closeIconPosition: 'top-right',
  });
};

// 获取二维码的封装函数（提供给QrCodeComponent使用）
const getQrCodeFunc = () => {
    return request.get(apiUrls.push.getQrCode);
}

// 处理二维码加载完成事件
const handleQrCodeLoaded = (data) => {
    QrCode.value = data;
    console.log('二维码加载完成:', data);
}

const getToken = async ()=>{
    try {
        // const response = await request.get(apiUrls.push.getWechatQrCode);
        const response = await request.get(apiUrls.push.pushToken);
        if(response.code === 200){
            console.log(response.data);
            token.value = response.data.token;
        }
    } catch (error) {
        console.error('获取二维码失败:', error);
    }
}

// 保存token
const saveToken = async () => {
  if (!token.value) {
    // 如果token为空，可以显示提示
    showToast('请输入token');
    return;
  }
  
  try {
    isSaving.value = true;
    
    const response = await request.post(apiUrls.push.pushToken, {
      token: token.value
    });
    
    isSaving.value = false;
    
    // 请求成功
    if (response.code === 200) {
        showToast('保存成功');
      // 可以在这里添加其他成功后的操作
    } else {
      // 请求失败但有响应
      showToast('保存失败');
    }
  } catch (error) {
    isSaving.value = false;
    console.error('保存token失败:', error);
    showToast('保存token失败');
  }
}

const sendMessage = ref()
const TestMsg = async ()=>{
    if (!token.value) {
        showToast('请先填写token');
        return;
    }
    const response = await request.post(apiUrls.push.sendTestMsg, {
      token: token.value,
      content: '测试消息1'
    });
    if(response.code === 200){
        showToast(response);
    }
    sendMessage.value = response;
    showToast(response);
}
</script>

<style scoped>
.push-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.push-card {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  padding: 30px;
  width: 100%;
}

.push-steps {
  margin-bottom: 20px;
}

.push-step {
  padding: 0 0 20px 0;
}

.push-step-header {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.push-step-index {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: #1677ff;
  color: #fff;
  border-radius: 50%;
  font-weight: 600;
  font-size: 18px;
  margin-right: 14px;
}

.push-step-title {
  font-size: 17px;
  font-weight: 600;
  color: #222;
}

.push-step-content {
  color: #666;
  font-size: 15px;
  margin-bottom: 14px;
}

.push-link {
  color: #1677ff;
  text-decoration: underline;
  margin-left: 4px;
}

.push-step-image {
  text-align: center;
  overflow: hidden;
  border-radius: 10px;
  display: inline-block;
  margin: 0 auto;
}

.push-step-image img {
  max-width: 260px;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  margin-top: 10px;
  transition: all 0.3s ease;
  transform-origin: center;
  cursor: pointer;
}

.push-step-image img:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 20px rgba(0,0,0,0.15);
  filter: brightness(1.05);
}

.push-divider {
  height: 1px;
  background: #f0f0f0;
  margin: 0 0 20px 0;
}

.push-form {
  margin-top: 20px;
}

.push-input {
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 14px;
  margin-bottom: 20px;
}

.push-btn {
  width: 100%;
  background-color: #007bff;
  color: #fff;
  border: none;
  border-radius: 4px;
  font-size: 16px;
  padding: 12px 0;
  cursor: pointer;
  transition: background-color 0.3s;
}

.push-btn:hover {
  background-color: #0056b3;
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes float {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-5px);
  }
  100% {
    transform: translateY(0px);
  }
}
</style>